<template>
    <div class="interact-box flex flex-column default-scroll">
        <div class="interact-title flex align-center">
            <div :class="['tab', { 'active': tabIndex === index }]" v-for="(item, index) in tabs" :key="index"
                @click="changeTab(index)">{{
                    item.name }}
            </div>
        </div>
        <!-- 问答互动 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 0">
            <div class="title flex justify-between align-center">
                <div class="left">基础设置</div>
                <div class="right btn">问答策略</div>
            </div>
            <div class="form-box">
                <el-form :model="baseForm">
                    <el-form-item label="公屏回复">
                        <el-radio-group v-model="baseForm.radio1">
                            <el-radio :value="1">开启</el-radio>
                            <el-radio :value="2">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="回复时是否复述问题">
                        <el-radio-group v-model="baseForm.radio2">
                            <el-radio :value="1">是</el-radio>
                            <el-radio :value="2">否</el-radio>
                        </el-radio-group>
                        <span class="tips">(屏蔽词过滤)</span>
                    </el-form-item>
                    <el-form-item label="回复时是否朗读昵称">
                        <el-select v-model="baseForm.value" size="small" style="width:200px">
                            <el-option v-for="(item, index) in opts" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                        <span class="tips">(屏蔽词过滤)</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 欢迎互动 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 1">
            <div class="title flex justify-between align-center">
                <div class="left">欢迎话术</div>
                <div class="right btn">欢迎策略</div>
            </div>
            <div class="form-box">
                <EditScriptCom></EditScriptCom>
            </div>
            <div class="title flex align-center">
                <div class="left">基础设置</div>
            </div>
            <div class="form-box">
                <el-form>
                    <el-form-item label="公屏回复">
                        <el-radio-group v-model="welcomeForm.radio1">
                            <el-radio :value="1">开启</el-radio>
                            <el-radio :value="2">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 答谢互动 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 2">
            <div class="title flex justify-between align-center">
                <div class="left">礼物答谢话术</div>
                <div class="right btn">答谢策略</div>
            </div>
            <div class="form-box">
                <EditScriptCom></EditScriptCom>
            </div>
            <div class="title flex justify-between align-center">
                <div class="left">关注答谢话术</div>
            </div>
            <div class="form-box">
                <EditScriptCom></EditScriptCom>
            </div>
            <div class="title flex justify-between align-center">
                <div class="left">点赞答谢话术</div>
            </div>
            <div class="form-box">
                <EditScriptCom></EditScriptCom>
            </div>
            <div class="title flex align-center">
                <div class="left">基础设置</div>
            </div>
            <div class="form-box">
                <el-form>
                    <el-form-item label="公屏回复">
                        <el-radio-group v-model="thanksForm.radio1">
                            <el-radio :value="1">开启</el-radio>
                            <el-radio :value="2">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 互动插播 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 3">
            <div class="title flex justify-between align-center">
                <div class="left">功能设置</div>
            </div>
            <div class="form-box">
                <el-form :model="insertForm">
                    <el-form-item label="公屏回复">
                        <el-radio-group v-model="insertForm.radio1">
                            <el-radio :value="1">开启</el-radio>
                            <el-radio :value="2">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="播报时机">
                        <el-radio-group v-model="insertForm.radio2">
                            <el-radio :value="1">随机模式</el-radio>
                            <el-radio :value="2">打断当前话术，立即播报</el-radio>
                            <el-radio :value="3">下一个逗号时播报</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div class="title flex justify-between align-center">
                <div class="left">内容设置</div>
            </div>
            <div class="form-box">
                <CollapseSetCom></CollapseSetCom>
            </div>
        </div>

        <!-- 互动弹讲解 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 4">
            <div class="title flex align-center">
                <div class="left">话术触发</div>
                <el-switch v-model="barrageForm.switchStatus" :active-value="true" :inactive-value="false" size="small" @change="">
                </el-switch>
            </div>
            <div class="form-box">
                <div class="form-item flex align-center">
                    <span class="label">主播讲解到以下话术时，自动弹讲解</span>
                    <el-checkbox v-model="barrageForm.autoExplain" :true-value="true" :false-value="false">自动响铃</el-checkbox>
                </div>
                <div class="form-item  flex">
                    <div class="label">主播话术内容</div>
                    <div class="right-content">
                        <div class="input-box flex flex-column">
                            <div class="input-cell flex align-center" v-for="item in barrageForm.inputContents" :key="item.id">
                                <el-input size="small" v-model="item.content" style="width:400px;margin-right:10px;"></el-input>
                                <el-icon><Delete /></el-icon>
                            </div>
                        </div>
                        <el-row justify="space-between" align="middle">
                            <div class="btn">添加</div>
                            <div class="btn">保存</div>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="title flex align-center">
                <div class="left">切品触发</div>
                <el-switch v-model="barrageForm.switchStatus" :active-value="true" :inactive-value="false" size="small" @change=""/>
            </div>
            <div class="form-box">
                <div class="form-item flex align-center">
                    <span class="label">切品后自动弹讲解</span>
                    <el-checkbox v-model="barrageForm.autoExplain" :true-value="true" :false-value="false">自动响铃</el-checkbox>
                </div>
            </div>
            <div class="title flex align-center">
                <div class="left">自动触发</div>
                <el-switch v-model="barrageForm.switchStatus" :active-value="true" :inactive-value="false" size="small" @change=""/>
            </div>
            <div class="form-box">
                <div class="form-item flex align-center">
                    <span class="label">每间隔</span>
                    <el-input-number :controls="false" size="small"></el-input-number>
                    <span class="label">至</span>
                    <el-input-number :controls="false" size="small"></el-input-number>
                    <span class="label">秒,自动弹讲解</span>
                    <el-checkbox v-model="barrageForm.autoExplain" :true-value="true" :false-value="false">自动响铃</el-checkbox>
                </div>
            </div>
        </div>

        <!-- 屏蔽设置 -->
        <div class="interact-content flex flex1 flex-column" v-show="tabIndex === 5">
            <div class="title flex align-center">
                <div class="left">关键词屏蔽</div>
                <span>(公屏评论如出现以下关键词，则不进行回复，请使用中文“、”号分隔，如数字人、不好看、假的)</span>
            </div>
            <div class="form-box">
                <el-input type="textarea" :rows="4"></el-input>
            </div>
            <div class="title flex align-center">
                <div class="left">用户屏蔽</div>
                <span>(包含主播账号、助播账号，请使用中文“、”号分隔)</span>
            </div>
            <div class="form-box">
                <el-input type="textarea" :rows="4"></el-input>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import EditScriptCom from '@/components/EditScriptCom/index.vue'
import CollapseSetCom from '@/components/CollapseSetCom/index.vue'

const tabIndex = ref(0)
const tabs = ref([
    {
        name: '问答互动'
    },
    {
        name: '欢迎互动'
    },
    {
        name: '答谢互动'
    },
    {
        name: '互动插播'
    },
    {
        name: '互动弹讲解'
    },
    {
        name: '屏蔽设置'
    }
])

const baseForm = reactive({
    radio1: 1,
    radio2: 2,
    value: 1
})

const welcomeForm = reactive({
    radio1: 1
})

const thanksForm = reactive({
    radio1: 1
})

const insertForm = reactive({
    radio1: 1,
    radio2: 1
})

const barrageForm = reactive({
    switchStatus: true,
    inputContents: [
        {
            content: '欢迎',
            id: 1
        },
        {
            content: '感谢',
            id: 2
        }
    ]
})

const opts = ref([
    {
        label: '随机朗读',
        value: 1
    },
    {
        label: '随机朗读第一个字+宝宝(X宝宝)',
        value: 2
    },
    {
        label: '随机朗读前两个字+宝宝(XX宝宝)',
        value: 3
    },
    {
        label: '随机朗读前三个字+宝宝(XXX宝宝)',
        value: 4
    },
    {
        label: '不朗读',
        value: 5
    }
])

const changeTab = (i) => {
    tabIndex.value = i
}
</script>

<style lang="less" scoped>
.interact-box {
    height: 100%;

    .interact-title {
        width: 100%;
        height: 35px;
        background-color: @bg-default;
        box-sizing: border-box;
        padding-left: 20px;
        margin-bottom: 20px;
        flex-shrink: 0;

        .tab {
            margin-right: 40px;
            color: @font-color-default;
            cursor: pointer;

            &.active {
                color: @color-white;
            }
        }
    }

    .interact-content {
        padding: 20px;
        background-color: @bg-default;

        .title {
            color: @color-white;
            // margin-bottom: 20px;

            .left {
                position: relative;
                padding: 10px;

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                    width: 4px;
                    height: 16px;
                    background-color: #1f6edf;
                }
            }
        }

        .form-box {
            .form-item {
                margin-bottom: 10px;

                .label{
                    color: @color-white;
                    margin:0 10px;
                    font-size:12px;
                }


                .right-content{
                    .input-box{
                        margin-bottom: 10px;

                        .input-cell{
                            margin-bottom: 10px;

                            :deep(.el-icon){
                                color: @color-white;
                                cursor: pointer;
                            }
                        }
                    }
                    
                }
            }

            .tips {
                font-size: 12px;
                color: @font-color-default;
                margin-left: 20px;
            }

            :deep(.el-form-item__label) {
                color: @color-white;
            }

            :deep(.el-radio__label) {
                color: @color-white;
            }
        }
    }
}
</style>